<template>
	<view class="box">
		<view class="header">
			<image :src="mixiImgUrl + '/static/r1.png'" mode="" class="header-bg"></image>
			<view class="header-btn">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="header-btn-tx">{{userInfo.is_member === 0 ? '暂未开通' : '已开通'}}</view>
			</view>
		</view>
		<view class="card">
			<view class="card-t flex-align">
				<view :class="current === 0 ? 'card-t-item flex-center card-t-item-ac' : 'card-t-item flex-center'" @click="setCurrent(0)">
					<image :src="mixiImgUrl + '/static/huangjinhuiy.png'" mode=""></image>
					黄金会员
				</view>
				<view :class="current === 1 ? 'card-t-item flex-center card-t-item-ac' : 'card-t-item flex-center'" @click="setCurrent(1)">
					<image :src="mixiImgUrl + '/static/zuanshihuiy.png'" mode=""></image>
					钻石会员
				</view>
				<view :class="current === 2 ? 'card-t-item flex-center card-t-item-ac' : 'card-t-item flex-center'" @click="setCurrent(2)">
					<image :src="mixiImgUrl + '/static/chuangpuhuiy.png'" mode=""></image>
					创谱会员
				</view>
			</view>
			<scroll-view scroll-x="true" class="scroll-X" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<view :class="active === index ? 'card-item ac' : 'card-item'" @click="setFormId(index)"
					v-for="(it, index) in list[current]">
					<view class="card-item-image">
						<text>{{it.month}}个月</text>
						<image :src="mixiImgUrl +`/static/${active === index ? 'hese' : 'huise'}.png`" mode=""></image>
					</view>
					<view class="card-item-price">
						<text>￥</text>
						{{it.price || ''}} 
					</view>
					<view class="card-item-tx">
						{{it.other}}
					</view>
				</view>
			</scroll-view>

		</view>
		<template >
<!-- 			<view class="title">
				黄金会员特权
			</view>
			<view class="list">
				<view class="list-item" v-for="it in 3">
					<image src="https://picsum.photos/200/300" mode=""></image>
					<view class="list-item-rig">
						<view class="list-item-rig-title">11</view>
						<view class="list-item-rig-subTitle">22</view>
					</view>
				</view>
			</view> -->
			<view class="btns">
				<!-- <view class="btns-l">查看开通地区</view> -->
				<view class="btns-r" @click="pay">
					￥{{price}} 开通月度会员特权
				</view>
			</view>
		</template>
		<!-- <footer>
			<image src="/static/index/icon_27.png" mode="" @click="toList"></image>
		</footer> -->
	</view>
</template>

<script>
	import {
		memberIndexHttp,
		memberOrderCreateHttp
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				current: 0,
				active: 0
			};
		},
		
		onLoad() {
			memberIndexHttp().then(res=>{
				let list = [res.data.level_1,res.data.level_2,res.data.level_3]
				this.list = list
			})
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		computed:{
			price(){
				let price = ''
				try {
					price = this.list[this.current][this.active].price
				} catch (e) {}
				return price
			},
			isProd(){
				return this.$store.state.envVersion === 'release'
			},
			userInfo(){
				return this.$store.state.userInfo
			}
		},
		methods: {
			setCurrent(e){
				this.current = e
				this.active = 0
			},
			toList() {
				uni.navigateTo({
					url: '/pages/customerServiceList/customerServiceList'
				})
			},
			toSelectArea() {
				uni.navigateTo({
					url: '/pages/selectRegion/selectRegion?type=2'
				})
			},
			getUserInfo() {
				user_list().then(res => {
					this.info = res.data
				})
			},
			setFormId(index) {
				this.active = index
			},
			init() {
				viplist({
					provinces_id: this.id
				}).then(res => {
					this.list = res.data
					this.form.id = res.data[0].id
				})
			},
			pay() {
				if(this.isProd) {
					let platform = uni.getSystemInfoSync().platform;
					if (platform === 'ios') {
						// 苹果
						console.log('苹果')
						uni.showToast({
							title: '由于相关规范，iOS功能暂不可用',
							icon: 'none'
						})
						return
					} else if (platform === 'android') {
						// 安卓
						console.log('安卓')
					} else {
						// 其他
						console.log('其他')
					}
				}
				
				uni.showLoading()
				memberOrderCreateHttp({
					id: this.list[this.current][this.active].id
				}).then(res => {
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: String(res.data.result.timestamp),
						nonceStr: res.data.result.nonceStr,
						package: res.data.result.package,
						signType: res.data.result.signType,
						paySign: res.data.result.paySign,
						success: res => {
							console.log('支付成功', res);
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							uni.navigateBack()
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
				}).finally(e => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}
	image {
		width: 100%;
		height: 100%;
	}

	.box {
		padding-bottom: 160rpx;
	}

	.header {
		width: 100%;
		height: 392rpx;
		position: relative;

		.header-bg {
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.header-btn {
			position: absolute;
			bottom: 82rpx;
			left: 33rpx;
			height: 55rpx;
			border-radius: 27rpx;
			background: #FFE6B2;
			display: flex;
			align-items: center;

			image {
				width: 55rpx;
				height: 55rpx;
				border-radius: 50%;
			}

			.header-btn-tx {
				height: 100%;
				padding: 0rpx 25rpx 0 15rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 22rpx;
				color: #BE853E;
				box-sizing: border-box;
				line-height: 55rpx;
			}
		}
	}

	.card {
		width: 100%;
		position: relative;
		.card-t {
			width: 100%;
			height: 76rpx;
			background: #F6F1E7;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: absolute;
			top: -26rpx;
			left: 0;
			.card-t-item {
				flex: 1;
				image {
					width: 27rpx;
					height: 27rpx;
					margin-right: 7rpx;
				}
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 26rpx;
				color: #84643B;
			}
			.card-t-item-ac {
				height: 100rpx;
				background: linear-gradient(-9deg, #F6F1E7, #FFEBD5);
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
			}
		}

		.scroll-X {
			width: 100%;
			height: 220rpx;
			display: inline-flex;
			overflow-x: scroll;
			overflow: hidden;
			white-space: nowrap;
			margin-top: 100rpx;
		}

		.card-item {
			width: 210rpx;
			height: 216rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1px solid #CCCCCC;
			position: relative;
			display: inline-block;
			margin-left: 31rpx;

			.card-item-image {
				width: 100%;
				height: 33rpx;
				position: relative;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				display: flex;

				justify-content: center;
				align-items: center;

				image {
					width: 124rpx;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 1;
				}

				text {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					text-align: center;
					margin: 0 auto;
					z-index: 2;
				}
			}

			.card-item-price {
				width: 100%;

				text {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				font-family: Arial;
				font-weight: bold;
				font-size: 48rpx;
				color: #333333;
				text-align: center;
				margin: 49rpx 0 33rpx;
			}

			.card-item-tx {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				text-align: center;
			}
		}

		.ac {
			border: 1px solid #A8793E;

			.card-item-price {
				color: #A8793E;

				text {
					color: #A8793E;
				}
			}

			.card-item-tx {
				color: #A8793E;
			}
		}

	}

	.title {
		margin: 47rpx 0 46rpx 0;
		width: calc(100% - 36rpx);
		margin-left: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: #84643B;
	}

	.list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx;

		.list-item {
			display: flex;
			align-items: center;
			margin-bottom: 33rpx;

			image {
				width: 86rpx;
				height: 86rpx;
			}

			.list-item-rig {
				flex: 1;
				margin-left: 21rpx;
				min-width: 0;

				.list-item-rig-title {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 18rpx;
				}

				.list-item-rig-subTitle {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.btns {
		width: 750rpx;
		height: 132rpx;
		background: #F6F1E7;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btns-l {
			width: 230rpx;
			height: 88rpx;
			background: rgba(26, 175, 125, 0);
			border-radius: 16rpx;
			border: 1px solid #020202;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #020202;
		}

		.btns-r {
			// width: 460rpx;
			width: 492rpx;
			height: 88rpx;
			background: #84643B;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #F5E176;
			line-height: 72rpx;
		}
	}

	.tab {
		width: 100%;
		transform: translateY(-20rpx);
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tab-item {

			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.active {
			background: white;

			text {
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #BE853E;
				position: relative;

			}

			text::before {
				content: "";
				width: 100%;
				height: 12rpx;
				background: linear-gradient(90deg, #F9C66A 0%, #FFFFFF 100%);
				position: absolute;
				bottom: -12rpx;
				left: 0;
			}
		}

		.img {
			width: 41rpx;
			height: 96rpx;
		}

		.tab-address {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 40rpx;

			text {
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}

			image {
				width: 24rpx;
				height: 13rpx;
				margin-left: 13rpx;
			}
		}
	}

	footer {
		width: 150rpx;
		height: 150rpx;
		position: fixed;
		right: 0;
		bottom: 178rpx;

	}
</style>